<template>
  <div class="total">
    <bigTitle msg="1.新建函数"></bigTitle>
    <tip
      msg="通过共有/公网IP可访问的Docker Hub镜像新建函数，默认创建会在公有Hub创建镜像"
    />
    <div class="new_input_total">
      <input
        class="new_input badge"
        v-model="func_name"
        placeholder="请在此输入函数名，必填"
      />
      <input
        class="new_input"
        v-model="docker_image"
        placeholder="请在此输入Docker Hub镜像，选填"
      />
    </div>
    <bigTitle msg="2.选择语言类型"></bigTitle>
    <tip msg="请选择创建语言的类型" />
    <myselect @select="select" />
    <div class="occu_height" style="height: 10px"></div>
    <div class="submit_deploy">
      <div @click="submit" class="btn_deploy_confirm">{{ submit_txt }}</div>
    </div>
    <div v-if="log.length" class="log_out">
      <bigTitle msg="输出"></bigTitle>
      <div class="container">{{ log }}</div>
    </div>
    <div v-if="docker.length" class="log_out">
      <bigTitle msg="Master节点上现有的Docker仓库"></bigTitle>
      <div class="docker_images_show">
        <div class="container" v-for="item in docker" v-bind:key="item">
          {{ item }}
        </div>
      </div>
    </div>
    <div class="occu_height" style="height: 20px"></div>
  </div>
</template>

<script>
import bigTitle from "../component/title.vue";
import myselect from "../component/myselect.vue";
import tip from "../component/tip.vue";
var { post } = require("../../Middleware/mid_request");
export default {
  created() {
    post({
      url: "/get_docker",
      success: (res) => {
        console.log(res.data);
        this.$data.docker = res.data.repositories.map((e) => {
          return "124.223.79.175:5000/" + e;
        });
      },
    });
  },
  methods: {
    select(idx) {
      this.$data.lang_index = idx;
    },
    submit: function () {
      this.$data.submit_txt = "请稍后…";
      if (this.$data.docker_image) {
        post({
          url: "/new_docker",
          data: {
            image: this.$data.docker_image,
            name: this.$data.func_name,
          },
          success: (res) => {
            this.$data.log = res.data;
            this.$data.submit_txt = "部署";
          },
        });
      } else {
        post({
          url: "/new_code",
          data: {
            name: this.$data.func_name,
            lang: [
              "node12",
              "csharp",
              "dockerfile",
              "go",
              "java11",
              "java11-vert-x",
              "node",
              "node12-debian",
              "node14",
              "node16",
              "node17",
              "php7",
              "python",
              "python3",
              "python3-debian",
              "ruby",
            ][this.$data.lang_index],
          },
          success: (res) => {
            this.$data.log = res.data;
            this.$data.submit_txt = "部署";
          },
        });
      }
    },
  },
  name: "newPage",
  data: function () {
    return {
      lang_index: 0,
      docker: "",
      submit_txt: "3.部署",
      log: "",
      func_name: "",
      docker_image: "",
    };
  },
  components: {
    bigTitle,
    tip,
    myselect,
  },
  props: {
    msg: String,
  },
};
</script>

<style scoped>
.docker_images_show {
  display: flex;
  flex-wrap: wrap;
}
.submit_deploy {
  margin-top: 10px;
}
.btn_deploy_confirm {
  width: 100px;
  height: 35px;
  background: #3e7cf4;
  color: white;
  font-size: 15px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.new_input_total input {
  position: relative;
  outline: none;
  width: 300px;
  height: 40px;
  border: none;
  margin-top: 7.5px;
  padding: 0 12.5px;
  border-radius: 10px;
  font-size: 18px;
}
.new_input_total {
  display: flex;
  width: 300px;
  flex-direction: column;
  position: relative;
}
.total {
  font-size: 30px;
  height: 100vh;
  width: 100%;
  overflow-y: scroll;
}
</style>
